<template>
  <div class="xq-form-wrapper" style="padding: 24px">
    <div class="xq-form-search">
      <XqFormBuild
        ref="searchForm"
        mode="search"
        :dataSource="{}"
        :dynamicData="dynamicData"
        :formFields="FormJson['fields']"
        :formValidators="FormJson['validators']"
        :formConfig="FormJson['config']['search']"
      />
      <div style="text-align: right">
        <a-space>
          <a-button type="primary" @click="filterRecord">搜索</a-button>
          <a-button type="default" @click="resetRecord">重置</a-button>
        </a-space>
      </div>
    </div>
    <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
      <XqTable
        :customize="FormJson['config']['table']['customize']"
        :scroll="{ x: columns.length * 150, y: 500 }"
        :pagination="false"
        :dataSource="tableData"
        :columns="columns"
        :row-selection="
          FormJson['config']['table']['extend']['batch']
            ? {
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }
            : null
        "
        class="xq-form-content-table"
        @change="onTableChange"
      >
        <!-- 主要内容，表格，自定义 header -->
        <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
          <span :key="index">
            {{ col.customTitle }}
          </span>
        </template>
        <!-- 主要内容，表格，自定义 td -->
        <!-- eslint-disable-next-line prettier/prettier -->
        <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
          <span v-if="col.dataIndex === 'tableAction'" :key="index">
            <a @click="showUpdateModal(record)" :disabled="record.auditStatus !== 1">处理</a>
          </span>
          <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
        </template>
      </XqTable>
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="currentPage"
          :page-size="pageSize"
          :total="total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          :page-size-options="['10', '20', '50', '100']"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
    </a-spin>
    <a-modal v-model="updateModalVisible" :maskClosable="false" :destroyOnClose="true" title="审核" :width="500">
      <XqFormBuild
        ref="updateForm"
        :dataSource="tempRecord"
        :dynamicData="dynamicData"
        :formFields="FormJson['fields']"
        :formValidators="FormJson['validators']"
        :formConfig="FormJson['config']['update']"
        @change="onFormChange(arguments[0], arguments[1], 'updateForm')"
      />
      <XqModalFooter slot="footer" @cancel="updateCancel" @ok="updateOk" />
    </a-modal>
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { retrieveReq, updateReq } from "./api";

const curdMixin = new XqCurdMixin({
  retrieveReq,
  updateReq,
  FormJson,
  tableConfigKey: "table"
});
export default {
  mixins: [curdMixin],
  data() {
    return {
      pageSize: 20
    };
  },
  computed: {
    retrieveParams() {
      return {
        request: {
          "orders[0].desc": true,
          "orders[0].property": "gmtCreate"
        }
      };
    }
  },
  methods: {
    afterRetrieve() {
      this.$store.dispatch("app/loadTrialCount");
    },
    onFormChangeCustom(value, key) {
      if (key === "auditStatus") {
        if (value === 1 || value === 2) {
          this.$set(this.FormJson["config"]["update"], "fieldKeys", { auditStatus: {} });
        } else if (value === 3) {
          this.$set(this.FormJson["config"]["update"]["fieldKeys"], "denialReason", {});
        }
      }
    }
  }
};
</script>

<style lang="scss"></style>
